<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom查询的其他方法</title>
    <script>
        window.onload=function () {
            var body=document.body;
            console.log(body);

            var de=document.documentElement;//获取html根标签
            console.log(de);
            
            var all=document.all;
            console.log(all);//返回一个数组[html, head, meta, title, script, body, script]
            console.log(all.length);//返回8

            var box1=document.getElementsByClassName("box1");
            console.log(box1.length);//返回1
       //
       //      //获取页面中的所有的div
       // var     divs=document.getElementsByTagName("div");
       // console.log(divs.length);//返回3
            //获取class为box1的所有div
         // var div=  document.querySelector(".box1 div");//.box1 div 是css选择器
            var div=document.querySelector("div");
            console.log(div.innerHTML);

            var box11=document.querySelector(".box1");
            console.log(box11.length);

            var box2=document.querySelector("#box2");
            console.log(box2);
        }
    </script>
</head>
<body>
<script>
    /*1.在document里有一个属性body 它保存的就是body的引用
    * 2.document.documentElement获取html根标签
    * 3.document.all代表页面里的 所有的元素
    * 4.document.getElementsByClassName可以根据class属性获取一组元素节点对象，浏览器IE8以下的版本不支持
    * 5. document.querySelector() query查询 Selector选择
    *       需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
    *       使用该方法总会返回一个唯一的元素，如果满足条件的元素有多个，那么也只返回一个
    *6.document.querySelectorAll 该方法与querySelector()类似，不同的是它将符合条件的元素封装到一个数组中返回
    *   即使符合条件的元素只有一个，也会返回数组
    *
    * */

</script>
<div class="box1"><div>我是box1下面的div</div></div>
<div id="box2"><div>我是box2下面的div</div></div>
<div class="box3"><div>我是box3下面的div</div></div>
<div></div>
</body>
</html>